<template>
  <PanelBox :image="image">
    <div class="operation-status-box">
      <div
        class="operation-status-content"
        v-for="(item, index) in operationList"
        :key="index"
      >
        <div
          class="content-images"
          :style="{ backgroundImage: 'url(' + item.images + ')' }"
        ></div>
        <span>{{ item.label }}：</span>
        <span class="content-num">{{ item.num }}</span>
        <span>座</span>
      </div>
    </div>
  </PanelBox>
</template>

<script>
import PanelBox from "@/component/PanelBox";
import { FetchGetTailingRuningStatus } from "@/api";

export default {
  name: "OperationStatus",

  components: {
    PanelBox,
  },

  props: {
    image: {
      type: String,
      default() {
        return "";
      },
    },
  },

  data() {
    return {
      operationList: [],
    };
  },

  created() {
    this.refreshList();
  },

  methods: {
    refreshList() {
      FetchGetTailingRuningStatus().then((res) => {
        if (res.running == null) {
          var running = 0;
        } else {
          var running = res.running;
        }
        if (res.disable == null) {
          var disable = 0;
        } else {
          var disable = res.disable;
        }
        this.operationList = [
          {
            images: require("@/asset/image/status-blue.png"),
            label: "在用",
            num: running,
          },
          {
            images: require("@/asset/image/status-gray.png"),
            label: "停用",
            num: disable,
          },
        ];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.operation-status-box {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .operation-status-content {
    width: 68%;
    height: 30%;
    display: flex;
    align-items: center;
    margin-top: 12px;
    .content-images {
      width: 38px;
      height: 38px;
      background: no-repeat center center/100% 100%;
      margin: 0 30px 0 0;
    }
    .content-num {
      color: #00fffc;
      font-family: PingFang SC;
      font-weight: bolder;
      font-size: 25px;
      margin: 0 20px;
    }
  }
}
</style>
